/*
 *
 * (c) Copyright Ascensio System Limited 2010-2023
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
*/


@import "params.less";

.us-popup-dialog {
    position: absolute;
    border: 1px solid @borderColor;
    background: @body-color;
    border-radius: 5px;
    box-sizing: border-box;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.35);
    padding: 16px;
    display: none;
    width: 430px;
    z-index: 677;
}

.us-dialog {
    padding: 10px 10px 14px 10px;

    .access-rights-container {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid @access-rights-container;
        position: relative;

        .access-rights-link {
            margin-left: 8px;
            position: relative;
            cursor: pointer;

            .access-rights-linktext {
                margin: 0 24px 0 0;
                border-bottom: 1px dotted;
            }

            &:after {
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                border-top: 4px solid;
                content: "";
                position: absolute;
                top: 50%;
                right: 9px;
                margin-top: -2px;
            }
        }
    }

    .small-button-container {
        margin-top: 12px;

        .gray-text {
            float: right;
        }
    }
}

.us-list-parent {
    height: 240px;
    overflow: auto;
    user-select: none;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: #BFBFBF transparent;

    &::-webkit-scrollbar-track {
        background: transparent;
    }

    .us-list {
    }

    .us-show-more-row {
        height: 32px;
        padding-left: 4px;
        display: flex;
        align-items: center;
    }

    .us-name {
        height: 32px;
        padding-left: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;

        .us-avatar {
            background-image: url("./images/svg/share/@{user-avatar-svg}");
            background-position: left center;
            background-repeat: no-repeat;
            background-size: 24px;
            display: inline-block;
            width: 24px;
            height: 24px;
            margin-right: 8px;
            border-radius: 12px;
            position: relative;
            vertical-align: middle;
        }

        .us-name-text {
            overflow: hidden;
            position: relative;
            padding-right: 30px;
            flex: 1;

            span {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                display: inline-block;
                width: 100%;
            }
        }

        .us-access {
            margin-left: auto;
            position: relative;
            width: 36px;
            height: 24px;

            &.static {
                margin-left: 20px;
            }

            &:not(.uneditable):after {
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                border-top: 4px solid;
                border-bottom: none;
                content: "";
                position: absolute;
                top: 10px;
                right: 4px;
            }
        }

        input[type=checkbox] {
            margin-right: 8px;
            vertical-align: middle;
            cursor: pointer;
        }

        &:not(.disabled):not(.selected):not(.unselectable):hover {
            .us-avatar:before {
                width: 24px;
                height: 24px;
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0.2;
                background: #000;
                border-radius: 12px;
            }

            .us-avatar:after {
                border-right: 2px solid @body-color;
                border-bottom: 2px solid @body-color;
                opacity: 0.7;
                width: 4px;
                height: 8px;
                transform: rotate(45deg);
                content: "";
                position: absolute;
                top: 6px;
                left: 10px;
            }

            .us-avatar:hover:before {
                opacity: 0.4;
            }
        }

        &.disabled {
            cursor: default;
            opacity: 0.5;
        }

        &.selected {
            .us-avatar:before {
                width: 24px;
                height: 24px;
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0.5;
                background: #000;
                border-radius: 12px;
            }

            .us-avatar:after {
                border-right: 2px solid @body-color;
                border-bottom: 2px solid @body-color;
                width: 4px;
                height: 8px;
                transform: rotate(45deg);
                content: "";
                position: absolute;
                top: 6px;
                left: 10px;
            }
        }

        &.us-groupname {
            .us-avatar {
                background-image: url("./images/svg/share/@{group-avatar}");
            }
        }
    }

    .us-group {
        .us-group-items {
            padding-left: 22px;
            display: none;
        }
    }

    &:not(.rootonly) {
        .us-group {
            .us-groupname:not(.unopenable) .us-name-text:after {
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                border-top: 4px solid;
                border-bottom: none;
                content: "";
                position: absolute;
                top: 6px;
                right: 16px;
            }

            &.opened:not(.unopenable) {
                .us-group-items {
                    display: block;
                }

                .us-groupname .us-name-text:after {
                    border-top: none;
                    border-bottom: 4px solid;
                }
            }
        }
    }
}

.us-access-rights-dialog {

    .access-rights-item {
        cursor: pointer;

        &:hover {
            background: @tl-combobox-container-hover;
        }

        div {
            padding-left: 32px;
            padding-right: 8px;
            height: 24px;
            line-height: 24px;
            background-position: 4px center;
        }
    }
}

.us-access {
    background-image: url("./images/svg/share/@{access-owner}");
    background-position: left center;
    background-repeat: no-repeat;

    &.uneditable {
        cursor: default;
    }

    &.access-1 {
        background-image: url("./images/svg/share/@{access-full}");
    }

    &.access-2 {
        background-image: url("./images/svg/share/@{access-read}");
    }

    &.access-3 {
        background-image: url("./images/svg/share/@{access-deny}");
    }

    &.access-4 {
        background-image: url("./images/svg/share/@{access-varies}");
    }

    &.access-5 {
        background-image: url("./images/svg/share/@{access-review}");
    }

    &.access-6 {
        background-image: url("./images/svg/share/@{access-comment}");
    }

    &.access-7 {
        background-image: url("./images/svg/share/@{access-form}");
    }

    &.access-8 {
        background-image: url("./images/svg/share/@{access-filter}");
    }

    &.access-remove {
        background-image: url("./images/svg/share/@{trash-svg}");
    }
}

.us-search {
    margin-bottom: 12px;
    position: relative;

    .textEdit {
        width: 100%;
        box-sizing: border-box;
        padding: 4px 24px 4px 4px;
        height: 24px;
        border-radius: 3px;
    }

    .clear-search {
        background-image: url(./images/svg/share/close.svg);
        background-repeat: no-repeat;
        width: 14px;
        height: 14px;
        display: none;
        position: absolute;
        background-repeat: no-repeat;
        right: 6px;
        top: 5px;
        cursor: pointer;
    }

    &.active {
        .clear-search {
            display: block;
        }
    }
}

.us-settings {
    margin-left: auto;
    width: 56px;
    height: 24px;

    .us-settings-item {
        display: inline-block;
        width: 24px;
        height: 24px;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center center;
        mask-position: center center;
        background-color: #CECECE;

        &:not(:first-child) {
            margin-left: 8px;
        }
    }

    .us-settings-lifetime {
        -webkit-mask-image: url(./images/svg/share/lifetime.svg);
        mask-image: url(./images/svg/share/lifetime.svg);
    }

    .us-settings-password {
        -webkit-mask-image: url(./images/svg/share/password.svg);
        mask-image: url(./images/svg/share/password.svg);
    }
}

.us-name:not(.disabled) .us-settings .us-settings-item {
    &.enabled {
        background-color: #3B72A7;
    }

    &.warning {
        background-color: #DA5353;
    }

    &:hover {
        background-color: #3B72A7;
    }
}